<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>开关灯功能</title>
  <script src="js/vue.js"></script>
  <style>
    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      font-family: Arial, sans-serif;
    }

    img {
      width: 200px; /* 根据图片大小调整 */
      height: auto;
      transition: opacity 0.3s ease;
    }

    button {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 灯泡图片 -->
  <img id="light" src="img/off.jpg" alt="Light Bulb">

  <!-- 按钮 -->
  <button id="toggleButton">开灯</button>

  <script>
    // 获取图片和按钮元素
    const light = document.getElementById('light');
    const button = document.getElementById('toggleButton');

    // 定义图片路径
    const lightOnImage = "img/on.jpg"; // 开灯图片
    const lightOffImage = "img/off.jpg"; // 关灯图片

    // 切换灯的状态
    button.addEventListener('click', () => {
      if (light.src.endsWith(lightOffImage)) {
        // 如果当前是关灯状态，切换为开灯
        light.src = lightOnImage;
        button.textContent = '关灯';
      } else {
        // 如果当前是开灯状态，切换为关灯
        light.src = lightOffImage;
        button.textContent = '开灯';
      }
    });
  </script>
</body>
</html>